<template>
  <div class="bgc">
     <div class="home">
         <div class="top">
            <img src="https://likede2-admin.itheima.net/img/logo.595745bd.png" alt="">
         </div>
             <el-form :model="ruleForm"
             status-icon :rules="rules"
             ref="ruleForm" label-width="50px"
             class="demo-ruleForm">
               <el-form-item  prop="loginName" >
                 <span class="pop"><i class="el-icon-mobile-phone"></i></span>
                 <el-input type="username" class="WW"
                 v-model="ruleForm.loginName" autocomplete="off" placeholder="请输入账号"></el-input>
               </el-form-item>
               <el-form-item  prop="password">
                 <span class="pop"><i class="el-icon-lock"></i></span>
                 <el-input :type='isAll? "password":"username" ' v-model="ruleForm.password"
                 autocomplete="off"  placeholder="请输入密码"></el-input>
                  <span class="ring" @click="Switch"><i class="el-icon-view"  ></i></span>
               </el-form-item>
               <el-form-item  prop="code">
                 <span class="pop"><i class="el-icon-connection"  ></i></span>
                 <!-- <el-input v-model.number="ruleForm.code" placeholder="请输入验证码"></el-input> -->
                 <el-input
                    type="text"
                    placeholder="点击图片更换验证码"
                    v-model="ruleForm.code"
                    class="vertify_code"
                    auto-complete="false"
                  ></el-input>
                  <!-- <span class="code">验证码</span> -->
                  <img :src=" imgUrl" @click="resetImg" class="vertify_img" />
               </el-form-item>
               <el-form-item>
                 <el-button type="primary" @click.enter="submitForm('ruleForm')" :loading='loading'>登陆</el-button>
               </el-form-item>
             </el-form>
     </div>
  </div>
</template>

<script>
// 导入定义到外面的api
import { getIMG, getlanding } from '@/api/user'
export default {
  name: 'DikticDkdIndex',

  data () {
    return {
      // 节流阀 密码隐藏显示
      isAll: true,
      ruleForm: {
        loginName: 'admin',
        password: 'admin',
        code: ''
      },
      // 可以点击
      loading: false,
      // 图片
      imgUrl: '',
      rules: {
        loginName: [
          // required：规则，trigger：失去焦点触发
          { required: true, min: 5, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, min: 5, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    }
  },

  mounted () {

  },
  // 初始化验证码
  created () {
    this.resetImg()
  },
  methods: {
    // 控制密码显示
    Switch () {
      this.isAll = !this.isAll
    },
    // 获取验证码
    async  resetImg () {
      // const red =
      await getIMG()
      // 拿到验证码图片
      this.imgUrl = 'https://likede2-java.itheima.net/api/user-service/user/imageCode/2543?time=' + new Date()
      // console.log(red)
    },
    // 登陆按键
    async submitForm () {
      try {
        // 请求完成前禁止点击
        this.loading = true
        await this.$refs.ruleForm.validate()
        const red = await getlanding({
          loginName: this.ruleForm.loginName,
          password: this.ruleForm.password,
          code: this.ruleForm.code,
          loginType: 0,
          clientToken: '2543'
        })
        console.log(red.token)
        // 存储到vuex 里面
        this.$store.dispatch('user/getToken1', red)
        // 登陆成功就跳到广告页面
        this.$router.push('/advertisement')
      } catch (e) {
        console.log(e)
      } finally {
        // 不管对错：都让他可以点击
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
 .bgc{
   background: url(https://likede2-admin.itheima.net/img/background.be4fae7d.png);
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    .home{
      width: 520px;
      height: 390px;
      background-color: #fff;
      border-radius:15px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .top{
        width: 95px;
        height: 95px;
        position: absolute;
        border-radius:50px ;
        left: 50%;
        transform: translate(-50%, -50%);
        img{
          width: 100%;
          height: 100%;
        }
      }
      .demo-ruleForm{
            width: 480px;
            margin-top: 90px;
            text-align: center;
          ::v-deep  .el-input__inner{
              height: 50px;
            padding-left:3em
            }
          ::v-deep .el-button{
             width: 430px;
             height: 50px;
          }
          .pop{
              position: absolute;
              z-index: 33;
              height: 25px;
              width: 25px;
              left: 10px;
              top: 4px;
          }
          .ring{
              position: absolute;
              z-index: 33;
              height: 25px;
              width: 25px;
              right:  10px;
              top: 4px;
          }
      }
   }
 }
 .vertify_code {
  width: 430px;
}
.vertify_img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 110px;
}
</style>
